<template>
    <div>
        <!-- 删除按钮的提示 -->
        <el-dialog
          title="提示"
          :visible.sync="deleteVisible"
          width="30%">
          <span>确定要删除 {{temp.assetName}} 这个数据集吗 </span>
          <span slot="footer" class="dialog-footer">
            <el-button type="danger" @click="deletedata">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 编辑数据集信息 -->
        <el-dialog title="编辑信息" :visible.sync="bianjiVisible">
          <el-form :model="form">
            <el-form-item label="数据集名称" >
              <el-input v-model="form.assetName"></el-input>
            </el-form-item>
            <el-form-item label="数据集描述" >
              <el-input v-model="form.assetDescription"></el-input>
            </el-form-item>
            <el-form-item label="数据类型">
              <el-input v-model="form.assetType"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="makechange">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 数据集表格 -->
        <el-table
          @row-click="row"
          :data="DataData"
          size
          style="width: 100%">
          <el-table-column

            prop="assetName"
            label="数据名称"
            >
          </el-table-column>
          <el-table-column
            prop="assetDescription"
            label="数据描述"
            >
          </el-table-column>
          <el-table-column
            prop="assetSize"
            label="数据集大小">
          </el-table-column>
          <el-table-column
            prop="assetState"
            label="数据集状态">
          </el-table-column>
          <el-table-column
            prop="assetType"
            label="数据集类型">
          </el-table-column>
          <el-table-column
            label="操作">
            <el-button type="primary" size="mini" @click="bianjiVisible=true">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteVisible=true">删除</el-button>
          </el-table-column>
          
        </el-table>
        <el-pagination
          @current-change="pagechange"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
    </div>
</template>
<script>
import { baseUrls } from "@/main.js";
export default {
  data () {
    return {
      //数据集数据
      DataData:[],
      //表格总数据
      total:1,
      //中途保存row的数据
      temp:{},
      //删除提示框
      deleteVisible:false,
      //编辑提示框
      bianjiVisible:false,
      //编辑表格数据
      form:{
        assetName:'',
        assetDescription:'',
        assetName:''
      },
      //当前页
      page:1
    }
  },
  methods:{
    //分页请求
    getbypage(){
      this.$http.get(`${baseUrls.base2}/asset/page`+`?currentPage=${this.page}`).then((res) => {
        this.total=res.data.data.total;
        res.data.data.records.forEach(i => {
          this.DataData.push(i);
        });
      });
    },
    //表格点击
    row(row){
      this.temp=row;
      this.form.assetId=row.id;
      this.form.assetName=row.assetName;
      this.form.assetDescription=row.assetDescription;
      this.form.assetType=row.assetType;
    },
    //删除数据集
    deletedata(){
      this.$http.delete(`${baseUrls.base2}/asset`,{params:{assetId:this.temp.id},Headers:{"Content-Type": "application/x-www-form-urlencoded"}}).then((result) => {
        console.log(result)
        this.deleteVisible=false
         this.$message.success('删除成功')
        setTimeout(()=>{
           this.$router.go(0);
        },1000)
      }).catch((err) => {
        console.log(err)
      });
    },
    //确认编辑信息
    makechange(){
      this.bianjiVisible=false;
      this.$http.put(`${baseUrls.base2}/asset`,{
        assetDescription: this.form.assetDescription,
        assetName: this.form.assetName,
        assetType: this.form.assetType,
        id: this.form.assetId}).then(()=>{
          this.$router.go(0);
        })
    },
    //页数改变
    pagechange(page){
      this.page=page;
      this.DataData=[];
      this.getbypage();
    }
  },
  //生命周期函数
  created(){
    this.getbypage();
  }
}
</script>
<style scoped>

</style>
